import React, { Component } from 'react';
import { Icon } from 'antd-mobile'
import { Container, Forward } from './StyleForwardNotice'
// import Grade from './list'

import Lists from './ui/Lists'
import { get } from '@u/http'

class ForadNotice extends Component {
    state = {
        bool: [],
        list: [],
        num: 0
    }
    async componentDidMount(){
        let result = await get({
            url: "/api/tongzhi/qunliao"
        })
        this.setState({
            list: result.data.Qun
        })
    }

    handleTijiaoClick = () => {
        this.setState({
            num: this.state.num = 1
        });
        
    }

    handleIconClick = (item) => {
        if (this.state.bool.indexOf(item.school) > -1) {
            this.state.bool.splice(this.state.bool.indexOf(item.school), 1)
        } else {
            this.state.bool.push(item.school)
        }
        this.setState({ bool: this.state.bool })
    }

    getIndex =(item) =>{
        let index
        this.state.list.forEach((t, m) => {
            let ch = t.child2.some(z => {
                return item.school === z.school
            })
            if (ch) index = m
        })
        return index
    }

    checkHandle = (e,item, index) => {
        let m = this.getIndex(item)
        if (item.child2 !== null && item.child2[0].child1 !== undefined && e !== 0 && e !== 1) {
            this.state.list[index].check = e.target.checked
            this.state.list[index].child2.forEach(v=>{
                v.check = e.target.checked
                v.child1.forEach(t=>{
                    t.check = e.target.checked
                })
            })
            this.setState({ list: this.state.list })
            return
        } 
        
        if (item.child2 !== undefined && e !== 0 && e!==1) {
            this.state.list[m].check = true
            this.state.list[m].child2[index].check = e.target.checked
            this.state.list[m].child2[index].child1.forEach(v => {
                v.check = e.target.checked
            })
            let boxx = this.state.list[m].child2.every(x => {
                return x.check === true
            })
            if (boxx) {
                this.state.list[m].check = true
                this.setState({ list: this.state.list })
                return
            } else {
                this.state.list[m].check = false
            }
            this.setState({ list: this.state.list })
            return
        }

        if(e===0){
            this.state.list[m].check = true
            this.setState({ list: this.state.list })

        }else if(e===1){
            this.state.list[m].check = false
            this.setState({ list: this.state.list })
        }
        
    }

    render() {        
        return (
            <Container>
                <header>
                    <p onClick={() => { this.props.history.goBack() }}>取消</p>
                    <p>转发通知</p>
                    <p onClick={this.handleTijiaoClick}>提交
                        <i style={ this.state.num === 1 ? {display: "block"} : {display: "none"}}>提交成功
                            <span onClick={() => { this.props.history.push('/historyNotice')}}>返回</span>
                        </i>
                    </p>
                </header>
                <h2>转发到群</h2>
                <Forward>
                    <nav>
                        <ul className="yi">
                            {
                                this.state.list.map((item,index) => {
                                    return <li key={item.qlId}>
                                        <Icon type={this.state.bool.indexOf(item.school) > -1 ? 'down' : 'right'} ></Icon>
                                        <span onClick={() => this.handleIconClick(item)}
                                        >{item.school}</span>
                                        <input
                                            type="checkbox" 
                                            checked={item.check}
                                            onChange={(e) => this.checkHandle(e,item,index)}
                                         />
                                        {
                                            this.state.bool.indexOf(item.school) > -1 && item.child2.length > 0 
                                            ? 
                                            <Lists 
                                                xiabiao={index}
                                                lists={item.child2} 
                                                checkedItem={this.checkHandle}
                                                checked={this.state.checked}
                                            ></Lists> : null
                                        }
                                    </li>
                                })
                            }
                        </ul>
                    </nav>
                </Forward>
            </Container>
        );
    }
}

export default ForadNotice;